<template>
  <view class="pc-index-bg">
    <RemindWebSocket />
    <!-- 主容器：实现侧边栏与内容区圆角衔接 -->
    <view class="layout-container">
      <!-- 侧边栏由组件实现 -->
      <SideBar @tabChange="handleTabChange" />

      <!-- 主内容区 -->
      <view class="main-content">
        <!-- 头部标题 -->
        <view class="main-header">
          <text class="main-title">修改密码</text>
        </view>
        <!-- 主体布局 -->
        <view class="main-body">
          <view class="password-reset-container">
            <view class="login-form">
              <!-- 账号（手机号）输入框 -->
              <view class="form-item">
                <text class="form-label">账号（手机号）</text>
                <view class="input-wrap disabled-bg">
                  <uni-icons type="phone" size="26" color="#409eff" />
                  <input 
                    v-model="form.phone" 
                    placeholder="当前登录用户手机号" 
                    class="input disabled-input" 
                    maxlength="11"
                    readonly
                    disabled
                  />
                </view>
              </view>

              <!-- 旧密码输入框 -->
              <view class="form-item">
                <text class="form-label">旧密码</text>
                <view class="input-wrap white-bg">
                  <uni-icons type="locked" size="26" color="#409eff" />
                  <el-input 
                    v-model="form.oldPassword" 
                    type="password" 
                    placeholder="请输入旧密码" 
                    class="input"
                    show-password
                    clearable
                  />
                </view>
              </view>

              <!-- 新密码输入框 -->
              <view class="form-item">
                <text class="form-label">输入新密码</text>
                <view class="input-wrap white-bg">
                  <uni-icons type="locked" size="26" color="#409eff" />
                  <el-input 
                    v-model="form.newPassword" 
                    type="password" 
                    placeholder="请输入新密码" 
                    class="input"
                    show-password
                    clearable
                  />
                </view>
              </view>

              <!-- 再次输入密码 -->
              <view class="form-item">
                <text class="form-label">再次输入新密码</text>
                <view class="input-wrap white-bg">
                  <uni-icons type="locked" size="26" color="#409eff" />
                  <el-input 
                    v-model="form.confirmPassword" 
                    type="password" 
                    placeholder="请再次输入新密码" 
                    class="input"
                    show-password
                    clearable
                  />
                </view>
              </view>

              <!-- 确认修改按钮 -->
              <button class="login-btn" @click="onResetPassword">确认修改</button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 点击页面其他区域关闭菜单 -->
    <view 
      v-if="showSettingMenu" 
      class="menu-mask"
      @click="showSettingMenu = false"
    ></view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { go } from '@/utils/nav.js';
import SideBar from '/pages/pc/sideBar.vue';
import RemindWebSocket from '@/components/RemindWebSocket.vue'; 
import { updatePassword } from '@/api/pc/elderly.js';
import { useUserStore } from '@/store/modules/user';

const userStore = useUserStore();
const showSettingMenu = ref(false); // 控制设置菜单显示/隐藏

// 表单数据
const form = reactive({
  phone: '',
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});

// 页面加载时获取当前用户ID并填入手机号输入框
onMounted(() => {
  const currentUserId = userStore.id;
  if (currentUserId) {
    form.phone = currentUserId;
  }
});

// 处理侧边栏tab切换
const handleTabChange = (tab) => {
  if (tab === 'home') {
  go('/pages/pc/index');
  } else if (tab === 'remind') {
    // 跳转到提醒页面
    // uni.showToast({ title: '跳转提醒页面', icon: 'none' });
  }
};

// 获取验证码（已注释）
// const getCode = () => {
//   // 简单验证手机号
//   if (!/^1[3-9]\d{9}$/.test(form.phone)) {
//     uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
//     return;
//   }

//   // 模拟验证码发送
//   countdown.value = 60;
//   const timer = setInterval(() => {
//     countdown.value--;
//     if (countdown.value <= 0) {
//       clearInterval(timer);
//     }
//   }, 1000);

//   uni.showToast({ title: '验证码已发送', icon: 'success' });
// };

// 确认修改密码
const onResetPassword = async () => {
  // 表单验证
  if (!form.phone) {
    return uni.showToast({ title: '请输入手机号', icon: 'none' });
  }
  if (!form.oldPassword) {
    return uni.showToast({ title: '请输入旧密码', icon: 'none' });
  }
  if (form.newPassword.length < 6 || form.newPassword.length > 16) {
    return uni.showToast({ title: '密码长度必须为6-16位', icon: 'none' });
  }
  if (form.newPassword !== form.confirmPassword) {
    return uni.showToast({ title: '两次输入的密码不一致', icon: 'none' });
  }

  try {
    // 调用修改密码API
    const response = await updatePassword(form.phone, form.oldPassword, form.newPassword);
    
    if (response.code === 200) {
      uni.showToast({ title: '密码修改成功', icon: 'success' });
      setTimeout(() => {
  go('/pages/pc/index', { replace: true });
      }, 1500);
    } else {
      uni.showToast({ title: response.msg || '密码修改失败', icon: 'none' });
    }
  } catch (error) {
    // console.error('修改密码失败:', error);
    // 显示具体的错误信息
    const errorMessage = error && typeof error === 'string' ? error : '网络错误，请稍后重试';
    uni.showToast({ title: errorMessage, icon: 'none' });
  }
};
</script>

<style scoped>
/* 主容器样式 */
.layout-container {
  display: flex;
  min-height: 100vh;
  background-color: #1976ed; 
  border-radius: 0;
  overflow: hidden;
  position: relative; 
}

/* 主内容区样式 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px 0 0 24px;
  padding-top: 20px;
  overflow-y: auto;
}

.main-header {
  height: 48px;
  display: flex;
  align-items: center;
  padding-left: 32px;
  background: #fff;
  font-size: 32px;
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
}

.main-title {
  color: #222;
}

.main-body {
  flex: 1;
  background: #fff;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 密码重置容器样式 */
.password-reset-container {
  background: #fff;
  border-radius: 16px;
  /* padding: 48px 64px; */
  width: 100%;
  max-width: 520px;
}

.login-form {
  margin-top: 0;
}

.form-item {
  margin-bottom: 28px;
}

.form-label {
  font-size: 18px;
  color: #222;
  margin-bottom: 10px;
  display: block;
}

.input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #e3e7ed;
  border-radius: 8px;
  padding: 0 16px;
  height: 52px;
  font-size: 18px;
  background: #f7f8fa;
  transition: box-shadow 0.2s;
}

.input-wrap.white-bg {
  background: #fff;
}

.input-wrap.disabled-bg {
  background: #f5f7fa;
  border-color: #e4e7ed;
}

.input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 18px;
  margin-left: 10px;
  outline: none;
}

.disabled-input {
  background: transparent !important;
  color: #c0c4cc !important;
  -webkit-text-fill-color: #c0c4cc !important;
  cursor: not-allowed;
}

/* Element Plus 输入框样式覆盖 */
:deep(.el-input) {
  flex: 1;
  margin-left: 10px;
}

:deep(.el-input__wrapper) {
  height: 52px;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

:deep(.el-input__inner) {
  height: 52px;
  line-height: 52px;
  font-size: 18px;
  border: none;
  background: transparent;
  padding: 0;
}

:deep(.el-input__suffix) {
  height: 52px;
  line-height: 52px;
}

:deep(.el-input__suffix-inner) {
  height: 52px;
  line-height: 52px;
}



/* 验证码输入框容器需要相对定位 */
.code-wrap {
  position: relative;
}

/* 验证码输入框特殊样式 */
.code-input :deep(.el-input__inner) {
  padding-right: 140px;
}

.get-code-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  height: 36px;
  background: #f5f7fa;
  color: #409eff;
  border-radius: 4px;
  font-size: 14px;
  padding: 0;
  line-height: 36px;
  border: none;
  cursor: pointer;
}

.get-code-btn:disabled {
  background: #eef1f6;
  color: #c0c4cc;
  cursor: not-allowed;
}

/* 确认修改按钮样式 */
.login-btn {
  width: 100%;
  height: 52px;
  background: linear-gradient(90deg, #1976ed 0%, #2386f8 100%);
  color: #fff;
  font-size: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px #e3e7ed;
  margin-top: 12px;
}

/* 点击页面其他区域关闭菜单 */
.menu-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 5;
}
</style>


